<template>
  <div class="header">
    <el-input v-model="goods.searchId" placeholder="请输入ID进行搜索" clearable @keyup.enter="searchClick" @clear="searchClear"
      class="input">
      <template #prepend>ID</template>
      <template #append>
        <el-button icon="Search" @click="searchClick" class="searchBtn" />
      </template>
    </el-input>
    <el-button type="success" @click="$router.push({ path: '/goods/goods/add' })">导出商品数据</el-button>
    <el-button type="primary" @click="$router.push({ path: '/goods/goods/add' })">添加商品</el-button>
  </div>
</template>

<script setup>
import useStore from '@/pinia/index.js';

const { goods } = useStore();

// 搜索点击事件
const searchClick = () => {
  // 获取搜索的值
  goods.REQUEST_goodsById()
};
// 清空搜索点击事件
const searchClear = () => {
  // 获取商品列表数据
  goods.REQUEST_goodsList();
};

</script>

<style lang="less" scoped>
:deep(.el-button+.el-button) {
  margin-left: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.input {
  width: 100%;
}

.searchBtn {
  &:hover {
    color: black !important;
  }
}
</style>